<template>
  <div class="app-container">
      <div v-if="!checkPermi(['platop'])">
        <div style="display: flex;">
          <el-card shadow="hover" style="cursor: pointer;background-color:#f9f9f9;width: 160px;margin-bottom: 20px" @click.native="addFabiPayee()">
            <div style="display: flex;flex-direction: column;align-items: center;">
              <img src="@/assets/va/payee.png" width="60">
              <span style="margin-top: 10px">添加法币账户</span>
            </div>
          </el-card>
          <el-card shadow="hover" style="cursor: pointer;background-color:#f9f9f9;width: 160px;margin-bottom: 20px;margin-left: 20px"
                   @click.native="addDigtalPayee()">
            <div style="display: flex;flex-direction: column;align-items: center;">
              <img src="@/assets/va/payee-digtal.png" width="60">
              <span style="margin-top: 10px">添加数字账户</span>
            </div>
          </el-card>
        </div>
      </div>
    <el-form v-if="checkPermi(['platop'])" :model="queryParams" ref="queryForm" size="small" :inline="true" :v-show="true" label-width="68px">
      <el-form-item label="商户号" prop="mchNo">
        <el-input
          v-model="queryParams.mchNo"
          placeholder="输入商户号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="商户名" prop="mchName">
        <el-input
          v-model="queryParams.mchName"
          placeholder="输入商户名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="收款人" prop="accountName">
        <el-input
          v-model="queryParams.accountName"
          placeholder="输入收款人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="账号" prop="accountNo">
        <el-input
          v-model="queryParams.accountNo"
          placeholder="输入收款账号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
<!--    <el-card shadow="always" style="margin-top: 30px;">-->
    <el-table v-loading="loading" :data="payeeList" @selection-change="handleSelectionChange">
      <!--      <el-table-column type="selection" width="55" align="center" />-->
      <!--      <el-table-column label="${comment}" align="center" prop="id" />-->
      <!--      <el-table-column label="${comment}" align="center" prop="provider" />-->
      <el-table-column v-if="checkPermi(['platop'])" label="客户名" align="center">
        <template slot-scope="scope">
          <p>
            <span style="color: rgb(114, 158, 213); border-radius: 1px; padding: 3px 7px; height: auto; width: auto;">商户号</span>
            <span>{{ scope.row.mchNo }}</span>
          </p>
          <p>
            <span
              style="color: rgb(86, 207, 86); border-radius: 1px; padding: 3px 7px; height: auto; width: auto;">名称</span>
            <span>{{ scope.row.mchName }}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column label="币种" align="center" prop="currency"/>
      <el-table-column label="收款账号/区块地址" align="center" prop="accountNo"/>
      <el-table-column label="收款银行/链" align="center" prop="bankName"/>
      <el-table-column label="收款人" align="center" prop="accountName"/>
      <el-table-column label="详情" align="center">
        <template slot-scope="scope">
          <el-tooltip effect="light" placement="left" v-if="scope.row.isVirtual == '0' && scope.row.extJson">
            <div slot="content" style="font-size: 16px">
              银行国家码:{{scope.row.extJson.areaCode}}<br/>
              银行地址:{{scope.row.extJson.bankAddress}}<br/>
              收款人地址:{{scope.row.extJson.payeeAddress}}<br/>
              <template  v-if="scope.row.isPobo == '1'">
                付款人国家码:{{scope.row.extJson.poboAreaCode}}<br/>
                付款人省份:{{scope.row.extJson.poboProvince}}<br/>
                付款人城市:{{scope.row.extJson.poboCity}}<br/>
                付款人邮编:{{scope.row.extJson.poboPostcode}}<br/>
                付款类型:{{scope.row.extJson.poboPurposedesc}}<br/>
                收款银行省份:{{scope.row.extJson.bankProvince}}<br/>
                收款银行城市:{{scope.row.extJson.bankCity}}<br/>
                收款银行地址:{{scope.row.extJson.bankAddress}}<br/>
              </template>
            </div>
            <el-button round>查看</el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleUpdate(scope.row)"-->
<!--            v-hasPermi="['bison:payee']"-->
<!--          >修改-->
<!--          </el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['bison:payee']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
<!--    </el-card>-->

    <!-- 添加或修改VA收款人对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body center>
      <el-form ref="form" :model="form" :rules="rules" label-width="150px">
        <template v-if="form.isVirtual == '0'">
          <el-form-item label="币种" prop="currency">
            <el-select v-model="form.currency" placeholder="请选择" style="width: 30%">
              <el-option v-for="item in fabiArr" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="区域" prop="inChina">
            <el-radio v-model="form.inChina" label="0">海外</el-radio>
            <el-radio v-model="form.inChina" label="1">大陆</el-radio>
          </el-form-item>
          <el-form-item label="收款户名" prop="accountName">
            <el-input v-model="form.accountName" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="收款账号" prop="accountNo">
            <el-input v-model="form.accountNo" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="收款银行" prop="bankName">
            <el-input v-model="form.bankName" placeholder=""></el-input>
          </el-form-item>
          <template v-if="form.inChina === '0'">
            <el-form-item label="SWIFT/BIC" prop="bankSwift">
              <el-input v-model="form.extJson.bankSwift" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="银行国家代码(两位)" prop="areaCode">
              <el-input v-model="form.extJson.areaCode" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="收款⼈地址" prop="payeeAddress">
              <el-input v-model="form.extJson.payeeAddress" placeholder="详细地址（含⻔牌号）"></el-input>
            </el-form-item>
          </template>
          <template v-if="form.inChina === '1'">
            <el-form-item label="身份证号码" prop="idCardNo">
              <el-input v-model="form.extJson.idCardNo" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phoneNo">
              <el-input v-model="form.extJson.phoneNo" placeholder=""></el-input>
            </el-form-item>
          </template>
          <el-form-item  v-if="form.inChina == '0'" label="是否POBO" prop="inChina">
            <el-radio v-model="form.isPobo" label="1">是</el-radio>
            <el-radio v-model="form.isPobo" label="0">否</el-radio>
          </el-form-item>
          <template v-if="form.isPobo == '1' && form.inChina == '0'">
            <el-form-item label="付款⽤途">
              <el-select v-model="form.extJson.poboPurpose" placeholder="请选择" style="width: 30%">
                <el-option v-for="item in purposeArr" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="付款⼈两位国家代码" prop="poboAreaCode">
              <el-input v-model="form.extJson.poboAreaCode" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="付款⼈所在省" prop="poboProvince">
              <el-input v-model="form.extJson.poboProvince" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="付款⼈所在市" prop="poboCity">
              <el-input v-model="form.extJson.poboCity" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="付款⼈所在地邮编 " prop="poboPostcode">
              <el-input v-model="form.extJson.poboPostcode" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="收款银行省份" prop="bankProvince">
              <el-input v-model="form.extJson.bankProvince" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="收款银行城市" prop="bankCity">
              <el-input v-model="form.extJson.bankCity" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="收款银行地址" prop="bankAddress">
              <el-input v-model="form.extJson.bankAddress" placeholder=""></el-input>
            </el-form-item>
          </template>
        </template>
        <template v-if="form.isVirtual === '1'">
          <el-form-item label="币种" prop="currency">
            <el-select v-model="form.currency" placeholder="选择币种" clearable>
              <el-option key="USDT" label="USDT" value="USDT"/>
            </el-select>
          </el-form-item>
          <el-form-item label="链" prop="bankName">
            <el-select v-model="form.bankName" placeholder="请选择" style="width: 50%">
              <el-option v-for="item in blockChainlArr" :key="item.value" :label="item.label"
                         :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="区块链地址" prop="accountNo">
            <el-input v-model="form.accountNo" placeholder=""></el-input>
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listPayee, getPayee} from "@/api/fusion/va/payee"
import {addPayee, updatePayee, delPayee} from "@/api/fusion/va/module/bison"

export default {
  name: "Payee",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // VA收款人表格数据
      payeeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        provider: 'bison',
        mchNo: null,
        accountName: null,
        accountNo: null
      },
      blockChainlArr: [
        {label: '波场TRC20', value: 'TRC20'},
        {label: '以太坊ERC20', value: 'ERC20'}
      ],
      fabiArr: [
        {label: '美元', value: 'USD'},
        {label: '欧元', value: 'EUR'},
        {label: '离岸人民币', value: 'CNH'}
      ],
      purposeArr: [
        {label: '现金管理', value: 'CASH'},
        {label: '电⼦⽀付', value: 'EPAY'},
        {label: '公司内部付款', value: 'INTC'},
        {label: '个⼈对个⼈⽀付', value: 'GP2P'},
        {label: '移动P2B⽀付', value: 'MP2B'},
        {label: '移动P2P⽀付', value: 'MP2P'},
        {label: '供应商付款', value: 'SUPP'},
        {label: '贸易融资交易', value: 'TRAD'},
        {label: '资金运作，合同⽀付', value: 'TREA'},
        {label: '跨境⽀付', value: 'VOST'},
        {label: '其他⽤途', value: 'OTHR'}
      ],
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        isPobo: [
          {required: true, message: "POBO不能为空", trigger: "blur"}
        ],
        accountName: [
          {required: true, message: "收款户名不能为空", trigger: 'blur'}
        ],
        bankName: [
          {required: true, message: "银行/链不能为空", trigger: "blur"}
        ],
        accountNo: [
          {required: true, message: "账户/区块链地址不能为空", trigger: "blur"}
        ],
        currency: [
          {required: true, message: "币种不能为空", trigger: "blur"}
        ],

      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询VA收款人列表 */
    getList() {
      this.loading = true;
      listPayee(this.queryParams).then(response => {
        this.payeeList = response.rows;
        for(let i = 0; i < this.payeeList.length; i++) {
          if(this.payeeList[i].extParams) {
            this.payeeList[i].extJson = JSON.parse(this.payeeList[i].extParams)
          }
        }
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        provider: 'bison',
        mchNo: undefined,
        currency: undefined,
        isVirtual: '0',
        inChina: '0',
        isPobo: '0',
        accountName: undefined,
        accountNo: undefined,
        bankName: undefined,
        extJson: {

        }
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.queryParams.provider = 'bison'
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    addFabiPayee() {
      this.reset();
      this.form.isVirtual = '0'
      this.handleAdd('添加法币收款账户')
    },
    addDigtalPayee() {
      this.reset();
      this.form.isVirtual = '1'
      this.handleAdd('添加数字货币收款账户')
    },
    /** 新增按钮操作 */
    handleAdd(title) {
      this.open = true;
      this.title = title;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getPayee(id).then(response => {
        this.form = response.data;
        this.form.inChina = this.form.inChina.toString()
        this.form.isVirtual = this.form.isVirtual.toString()
        this.form.isPobo = this.form.isPobo.toString()
        this.form.extJson = {}
        if(response.data.extParams && response.data.extParams.length > 2) {
          this.form.extJson = JSON.parse(response.data.extParams)
          // Object.assign(this.form.extJson , d)
        }
        this.open = true;
        this.title = "修改收款账户";

      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updatePayee(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPayee(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除收款人编号为"' + ids + '"的数据项？').then(function () {
        return delPayee(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('va/payee/export', {
        ...this.queryParams
      }, `payee_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
